import React, { Component } from "react"
import { Form, Radio, Switch, Modal } from "antd"
import EditInput from './component/editInput';
import { cloneDeep } from 'lodash';
import { rechargeWithdrawList, rechargeWithdrawEdit } from '@/request/wallet/rechargeWithdraw'
export default class Transfer extends Component {
  state = {
    redPacket: {},// 红包
    transfer: {},// 转账
    redPacketType: null, //红包入口是否展示
    transferType: null, //转账入口是否展示
    moneyLimit: {},// 转账过大验证码验证最大额度
    moneyVerification: '', // 转账过大验证码验证最大额度开关
    replacementEquipment: '', // 更换常用设备时转账手机验证码开关
    transferAccountsType: '', //红包转账入口状态
    isInputChange: false,//是否修改值
    oldInput: '',//旧数据输入框
    redPacketId: '',//红包id
    transferId: '',//转账id
  }
  componentDidMount() {
    this.getRedPacketData()
    this.getTransferData()
  }
  // 获取转账数据
  getTransferData = async () => {
    let res = await rechargeWithdrawList({ type: 3 })
    if (res.code === 0 && res.data) {
      let data = res.data
      this.setState({
        transfer: {
          minimumAmount: {
            label: '单次最低金额',
            key: 'minimumAmount',
            value: (data.minimumAmount / 100).toFixed(2),
            minValue: 0.01,
            maxValue: 999999.99,
            precision: 2,
            status: 0, //编辑 0 保存1
            bgColor: false
          },
          maximumAmount: {
            label: '单次最高金额',
            key: 'maximumAmount',
            value: (data.maximumAmount / 100).toFixed(2),
            minValue: 0.01,
            maxValue: 999999.99,
            precision: 2,
            status: 0, //编辑 0 保存1
            bgColor: false
          },
          dayAmount: {
            label: '单日总额度',
            key: 'dayAmount',
            value: (data.dayAmount / 100).toFixed(2),
            minValue: 0.01,
            maxValue: 999999.99,
            precision: 2,
            status: 0, //编辑 0 保存1
            bgColor: false
          },
          dayNumber: {
            label: '单日最大次数',
            key: 'dayNumber',
            value: data.dayNumber,
            minValue: 1,
            maxValue: 10000,
            precision: 0,
            status: 0, //编辑 0 保存1
            bgColor: false
          },
        },
        transferId: data.imAmountConfigId,
        transferType: data.transferAccountsType,
        replacementEquipment: data.replacementEquipment === 0 ? true : false,
        moneyVerification: data.moneyVerification === 0 ? true : false,
        moneyLimit: {
          label: '触发验证的最大金额额度',
          key: 'moneyLimit',
          value: (data.moneyLimit / 100).toFixed(2),
          minValue: 0.01,
          maxValue: 999999.99,
          precision: 2,
          status: 0, //编辑 0 保存1
        },
      })
    }
  };
  // 获取红包数据
  getRedPacketData = async () => {
    let res = await rechargeWithdrawList({ type: 2 })
    if (res.code === 0 && res.data) {
      let data = res.data
      this.setState({
        redPacket: {
          minimumAmount: {
            label: '单次最低金额',
            key: 'minimumAmount',
            value: (data.minimumAmount / 100).toFixed(2),
            minValue: 0.01,
            maxValue: 999999.99,
            precision: 2,
            status: 0, //编辑 0 保存1
            bgColor: false
          },
          maximumAmount: {
            label: '单次最高金额',
            key: 'maximumAmount',
            value: (data.maximumAmount / 100).toFixed(2),
            minValue: 0.01,
            maxValue: 999999.99,
            precision: 2,
            status: 0, //编辑 0 保存1
            bgColor: false
          },
          dayAmount: {
            label: '单日总额度',
            key: 'dayAmount',
            value: (data.dayAmount / 100).toFixed(2),
            minValue: 0.01,
            maxValue: 999999.99,
            precision: 2,
            status: 0, //编辑 0 保存1
            bgColor: false
          },
          dayNumber: {
            label: '单日最大次数',
            key: 'dayNumber',
            value: data.dayNumber,
            minValue: 1,
            maxValue: 10000,
            precision: 0,
            status: 0, //编辑 0 保存1
            bgColor: false
          },
        },
        redPacketId: data.imAmountConfigId,
        redPacketType: data.transferAccountsType
      })
    }
  };
  // 修改转账入口状态
  transferStatusChange = async (e) => {
    let res = await rechargeWithdrawEdit({
      imAmountConfigId: this.state.transferId, transferAccountsType: e.target.value
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '保存成功' })
      this.getTransferData()
    }
  }
  // 修改红包入口状态
  redPacketStatusChange = async (e) => {
    let res = await rechargeWithdrawEdit({
      imAmountConfigId: this.state.redPacketId, transferAccountsType: e.target.value
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '保存成功' })
      this.getRedPacketData()
    }
  }
  // 更换设备时是否开启验证码
  replacementEquipmentSwitch = async (e) => {
    let res = await rechargeWithdrawEdit({
      imAmountConfigId: this.state.transferId, replacementEquipment: e ? 0 : 1
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: !e ? '关闭成功' : '开启成功' })
      this.getTransferData()
    }
  }
  // 金额过大时是否开启验证码
  moneyVerificationSwitch = async (e) => {
    let res = await rechargeWithdrawEdit({
      imAmountConfigId: this.state.transferId, moneyVerification: e ? 0 : 1
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: !e ? '关闭成功' : '开启成功' })
      this.getTransferData()
    }
    this.setState({
      isMaxMoneyFlag: e
    })
  }
  // 保存时掉接口
  saveFn = async (params, v, id) => {
    let data = v.precision === 0 ? params.data.value :  React.$transNum(params.data.value, 0, 2)
    let res = await rechargeWithdrawEdit({
      imAmountConfigId: id, [v.key]: data
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '保存成功' })
      v.status = 0
      this.getTransferData()
      this.getRedPacketData()
      return v
    }
  }
  // 金额校验规则
  moneyReg = (params, defaultParams, id) => {
    let numValues = Number(params.data.value)
    Object.values(defaultParams).map((v, i) => {
      if (params.index === i) {
        if (params.data.key === 'maximumAmount') {
          if (numValues <= Number(defaultParams.minimumAmount.value)) {
            Modal.error({
              content: '单次最高金额不能小于或等于单次最低金额',
              okText: '确定'
            });
            return
          } else if (numValues > Number(defaultParams.dayAmount.value)) {
            Modal.warning({
              content: '单次最高金额不能大于单日总额度',
              okText: '确定'
            });
            return
          } else {
            this.saveFn(params, v, id)
          }
        } else if (params.data.key === 'minimumAmount') {
          if (numValues >= Number(defaultParams.maximumAmount.value)) {
            Modal.warning({
              content: '单次最低金额不能大于或等于单次最高金额',
              okText: '确定'
            });
            return
          } else {
            this.saveFn(params, v, id)
          }
        } else if (params.data.key == 'dayAmount') {
          if (numValues < Number(defaultParams.maximumAmount.value)) {
            Modal.error({
              content: '单次最高金额不能大于单日总额度',
              okText: '确定'
            });
            return
          } else {
            this.saveFn(params, v, id)
          }
        } else {
          this.saveFn(params, v, id)
        }
        v.status = 0
        v.value = params.data.value
        return v
      }
    })
  }
  // 转账保存
  transferSave = (params) => {
    let { transfer, transferId } = this.state
    this.moneyReg(params, transfer, transferId)
  }
  // 转账编辑
  transferEdit = (params) => {
    let { transfer, redPacket } = this.state
    let data = ""
    Object.values(transfer).map((v, i) => {
      if (params.index === i) {
        data = v.value
        return v.status = 1
      } else {
        if (v.status === 1) {
          v.value = this.state.oldInput
        }
        v.status = 0
        Object.values(redPacket).map((v, i) => {
          return v.status = 0
        })
        this.state.moneyLimit.status = 0
        return v
      }
    })
    this.setState({
      transfer: cloneDeep(transfer),
      oldInput: data,
      redPacket: cloneDeep(redPacket),
    })
  }
  // 转账取消
  transferCancel = (params) => {
    let { transfer, isInputChange } = this.state
    Object.values(transfer).map((v, i) => {
      if (params.index === i) {
        // if (isInputChange) {
        //   this.getTransferData()
        // }
        return v.status = 0
      }
    })
    this.setState({
      transfer: cloneDeep(transfer)
    })
  }
  // 红包保存
  redPacketSave = (params) => {
    let { redPacket, redPacketId } = this.state
    this.moneyReg(params, redPacket, redPacketId)
  }
  // 红包编辑
  redPacketEdit = (params) => {
    let { redPacket, transfer } = this.state
    Object.values(redPacket).map((v, i) => {
      if (params.index === i) {
        return v.status = 1
      } else {
        this.state.moneyLimit.status = 0
        Object.values(transfer).map((v) => { return v.status = 0 })
        return v.status = 0
      }
    })
    this.setState({
      transfer: cloneDeep(transfer),
      redPacket: cloneDeep(redPacket)
    })
  }
  //红包取消 
  redPacketCancel = (params) => {
    let { redPacket } = this.state
    Object.values(redPacket).map((v, i) => {
      if (params.index === i) {
        return v.status = 0
      }
    })
    this.setState({
      redPacket: cloneDeep(redPacket)
    })
  }
  // 验证码超出最大金额时验证 保存
  moneyLimitSave = async (params) => {
    let { moneyLimit, transferId } = this.state
    let res = await rechargeWithdrawEdit({ imAmountConfigId: transferId, moneyLimit: React.$transNum(params.data.value, 0, 2) })
    if (res.code === 0) {
      this.setState({
        moneyLimit: {
          ...moneyLimit,
          value: params.data.value,
          status: 0
        }
      })
      React.$message({ type: 'success', content: '保存成功' })
      this.getTransferData()

    }
  }
  // 验证码超出最大金额时验证 编辑
  moneyLimitEdit = () => {
    let { moneyLimit, transfer, redPacket } = this.state
    moneyLimit.status = 1
    Object.values(transfer).map((v) => { return v.status = 0 })
    Object.values(redPacket).map((value) => { return value.status = 0 })
    this.setState({
      transfer: cloneDeep(transfer),
      redPacket: cloneDeep(redPacket),
      moneyLimit: cloneDeep(moneyLimit)
    })
  }
  // 验证码超出最大金额时验证 取消
  moneyLimitCancel = () => {
    let { moneyLimit } = this.state
    moneyLimit.status = 0
    this.setState({
      moneyLimit
    })
  }
  render() {
    const { redPacket, transfer, moneyLimit, moneyVerification, replacementEquipment, transferType, redPacketType } = this.state
    return (
      <div className="p-layout-box commodity-examine" >
        <div style={{ display: 'flex', marginLeft: 30, alignItems: 'baseline', width: 550 }}>
          <div style={{ marginRight: 50, fontSize: 14 }}>转账</div>
          <Form
            style={{ flex: 1 }}
            labelAlign="left"
            colon={false}
            labelWrap
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 10
            }}
          >
            <Form.Item
              style={{ marginBottom: 10 }}
              label="转账入口"
            >
              <Radio.Group value={transferType} onChange={(e) => this.transferStatusChange(e)}>
                <Radio value={0}>展示</Radio>
                <Radio value={1}>隐藏</Radio>
              </Radio.Group>
            </Form.Item>
            {Object.values(transfer).map((item, index) => {
              return (
                <Form.Item
                  style={{ marginBottom: 10 }}
                  label={item.label}
                >
                  <EditInput editData={item} editIdex={index} onEdit={this.transferEdit} onSave={this.transferSave} onCancel={this.transferCancel} />
                </Form.Item>
              )
            })}
            {/* <div style={{ marginBottom: 20 }}><span style={{ marginRight: 10 }}>更换常用设备时转账手机验证码验证</span>
              <Switch checked={replacementEquipment} onChange={(e) => this.replacementEquipmentSwitch(e)} />
            </div> */}
            <div style={{ marginBottom: 10 }}>
              <span style={{ marginRight: 10 }}>转账金额过大时手机验证码验证</span>
              <Switch checked={moneyVerification} onChange={(e) => this.moneyVerificationSwitch(e)} />
            </div>
            {
              moneyVerification ? <div style={{ marginBottom: 10, display: 'flex', alignItems: 'center' }}>
                <span style={{ marginRight: 10 }}>触发验证的最大金额额度</span>
                <EditInput editData={moneyLimit} onEdit={this.moneyLimitEdit} onSave={this.moneyLimitSave} onCancel={this.moneyLimitCancel} />
              </div>
                : null
            }
          </Form>
        </div>
        <div style={{ display: 'flex', marginLeft: 30, marginTop: 40, alignItems: 'baseline', width: 550 }}>
          <div style={{ marginRight: 50, fontSize: 14 }}>红包</div>
          <Form
            style={{ flex: 1 }}
            labelAlign="left"
            colon={false}
            labelWrap
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 10
            }}
          >
            <Form.Item
              style={{ marginBottom: 10 }}
              label="红包入口"
            // name="redPacketType"
            >
              <Radio.Group value={redPacketType} onChange={(e) => this.redPacketStatusChange(e)}>
                <Radio value={0}>展示</Radio>
                <Radio value={1}>隐藏</Radio>
              </Radio.Group>
            </Form.Item>
            {Object.values(redPacket).map((item, index) => {
              return (
                <Form.Item
                  style={{ marginBottom: 10 }}
                  label={item.label}
                  name={item.key}
                >
                  <EditInput editData={item} editIdex={index} onEdit={this.redPacketEdit} onSave={this.redPacketSave} onCancel={this.redPacketCancel} />
                </Form.Item>
              )
            })}
          </Form>
        </div>
      </div>
    );
  }
}